<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请创建社团</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all"/>
</head>
<body>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/common/jquery-3.4.1.js"></script>
<!--创建申请社团的页面 start-->
<form class="layui-form" id="addForm">
    <div class="layui-form-item">
        <label class="layui-form-label">社团名称</label>
        <div class="layui-input-inline">
            <input type="text" name="a_name" required lay-verify="required" placeholder="请输入社团名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社长学号</label>
        <div class="layui-input-inline">
            <input type="text" name="username" required lay-verify="required" placeholder="请输入社长学号" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">12位</div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-inline">
            <input type="text" name="creationtime" id="creationtime" readonly="readonly" required lay-verify="required"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">社团人数</label>
        <div class="layui-input-inline">
            <input type="radio" name="number" value="1" title="创建时默认为1" checked/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片地址</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="addUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="a_url" id="a_url"><!--隐藏的输入框 用来接收成功响应的文件名,方便提交-->
        </div>
    </div>

    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">社团状态</label>
        <div class="layui-input-inline">
            <input type="radio" name="examine" value="1" title="等待审核" checked/>
            <input type="radio" name="examine" value="0" title="审核通过"/>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="addSubmit" class="layui-btn" lay-submit lay-filter="add">提交申请</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--创建申请社团的页面 end-->
<script>
    layui.use(['table', 'layer', 'form', 'laydate', 'upload'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;

        //addForm表单的创建时间--start
        laydate.render({
            elem: '#creationtime',
            value: new Date(),
            done: function (value, date) {
            }
        });
        //addForm表单的创建时间--end

        // addForm表单的文件上传--start
        upload.render({
            elem:'#addUpload',
            url:'/u/ai/upload',
            // filed:'file',				//默认是file
            // auto:false,		//文件不会直接上传完图片之后自动上传
            // bindAction:'#addSubmit',	//绑定一个按钮，将点击按钮时上传图片
            done:function (res) {	//上传成功之后执行
                console.log(res);
                //将上传成功响应的文件名放置在隐藏的输入框a_url中，方便待会添加时提交数据
                $("#a_url").val(res.src);
                console.log();
            }
        });
        //addForm表单的文件上传--end

        //--添加功能--start
        //思路：1.给添加页面的添加按钮绑定表单提交事件  2.发送ajax请求，执行操作
        // 3.根据响应结果实现局部刷新（3.1隐藏弹出层  3.2 清空添加界面输入框数据 3.3 提示添加成功 3.4 表格重载）
        form.on('submit(add)',function (date) {

            $.ajax({
                url:'/u/ai/insert',
                data:$("#addForm").serialize(), //获取添加社团的请求参数
                dataType:'json',
                method:'post',
                success:function (result) {
                    if(result.flag){
                        // layer.closeAll();       //关闭添加的界面弹出层
                        $("#addForm")[0].reset();   //使用js中的reset方法情况表单数据
                        layer.msg("提交申请成功");
                        // table.reload('communityList')
                    }
                    else {
                        alert(result.msg);
                    }},
                error:function (data) {

                }

            });

            return false;   // 页面不需要提交
        });
        //--添加功能--end
    });
</script>

</body>
</html>